<!-- Home.vue -->
<template>
  <div class="dashboard-container">
    <!-- 欢迎信息 -->
    <el-card class="welcome-card">
      <div class="welcome-message">
        <h1>欢迎使用快递管理系统</h1>
        <p>这里是您的快递管理仪表盘，您可以快速查看系统状态、管理快递和处理任务。</p>
      </div>
    </el-card>

    <!-- 统计信息 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <i class="el-icon-truck stat-icon"></i>
            <h3>待处理快递</h3>
            <p class="stat-value">125</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <i class="el-icon-s-check stat-icon"></i>
            <h3>已签收快递</h3>
            <p class="stat-value">1,024</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <i class="el-icon-s-flag stat-icon"></i>
            <h3>运输中快递</h3>
            <p class="stat-value">78</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <i class="el-icon-s-comment stat-icon"></i>
            <h3>用户反馈</h3>
            <p class="stat-value">12</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->

    <!-- 最新通知 -->
    <el-card class="notifications-card">
      <h2>最新通知</h2>
      <el-timeline>
        <el-timeline-item timestamp="2023-10-01" placement="top">
          <el-card>
            <h4>系统升级通知</h4>
            <p>系统将于2023年10月5日凌晨2:00进行升级，预计耗时2小时，请提前做好准备。</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2023-09-28" placement="top">
          <el-card>
            <h4>新功能上线</h4>
            <p>快递批量导入功能已上线，欢迎使用！</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2023-09-25" placement="top">
          <el-card>
            <h4>维护公告</h4>
            <p>系统将于2023年9月26日进行例行维护，期间可能无法访问。</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    handleAddParcel() {
      this.$message('新增快递功能');
    },
    handleSearchParcel() {
      this.$message('查询快递功能');
    },
    handleUpdateParcel() {
      this.$message('修改快递信息功能');
    },
    handleDeleteParcel() {
      this.$message('删除快递功能');
    },
  },
};
</script>

<style scoped>
/* 样式保持不变 */
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.welcome-message h1 {
  margin-bottom: 10px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
}

.stat-icon {
  font-size: 36px;
  color: #409EFF;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}

.quick-actions-card {
  margin-bottom: 20px;
}

.notifications-card {
  margin-bottom: 20px;
}
</style>
